<template>
  <section>
    <div class="bar">
      <div class="bar-right">
        <div class="collapse" @click.prevent="collapse">
          <i class="fa fa-align-justify" ></i>
        </div>
        <!-- <el-select v-if="themeSwitch" class="theme-select" v-model="theme" placeholder="请选择主题" size="mini">
          <el-option
                  v-for="item in themes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select> -->

        <!-- <div class="theme-icon" @click="handleDrawerStatus(true)">
          <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
        </div> -->
        <el-dropdown trigger="hover" class="userinfo">
            <span class="el-dropdown-link userinfo-inner">
                <img :src="UserPng" />
                <!-- <img src="../../../../assets/images/user.png" /> -->
                {{userInfo.userName || userInfo.account}}
            </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in menuPageList" :key="index" @click.native="handleWorkingInspecting(item)">
              <i v-bind:class="item.icon"></i> {{item.name}}
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="handleUserInfo">
              <i class="fa fa-drivers-license-o"></i> {{ $t("information") }}
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">
              <i class="fa fa-sign-out"></i> {{ $t("logout") }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="theme-icon" @click="handleScreen">
          <i class="fa fa-arrows-alt" aria-hidden="true"></i>
        </div>
        <el-dropdown trigger="hover" class="theme-icons" v-if="languageSwitch">
          <div class="theme-icon">
            <i class="fa fa-language" aria-hidden="true"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handleLanguage('zh-CN')">简体中文</el-dropdown-item>
            <el-dropdown-item @click.native="handleLanguage('zh-TW')">繁体中文</el-dropdown-item>
            <!-- <el-dropdown-item @click.native="handleLanguage('en')">English</el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- <el-drawer
      title="主题"
      :visible.sync="drawer.themeDrawer.visible"
      :direction="drawer.themeDrawer.direction"
      :before-close="handleDrawerClose">
      <span>我来啦!</span>
    </el-drawer> -->
  </section>
</template>
<script>

/*#region 导入函数*/
import { mapGetters } from "vuex";
import {fullscreenToggel, listenfullscreen} from "../../../../utils/full-screen.js";
import UserPng from "../../../../assets/images/user.png";

/*#endregion*/

export default{
  name: "NavBar",
  methods: {

    /*#region 自定义函数(组件change事件等)*/
    //退出登录
    logout() {
      this.$confirm("确认退出吗?", "提示", {
      }).then(() => {
        localStorage.clear();
        sessionStorage.clear();
        this.$router.push("/login");
      });
    },
    collapse() {
      this.$store.dispatch("changeIsCollapse");
    },

    /*#endregion*/

    /*#region 数据提交事件*/

    /*#endregion*/

    /*#region 操作函数(handle)*/
    handleWorkingInspecting(item) {
      window.location = item.url;
    },
    handleUserInfo() {
      location.href = "#/userinfo";
    },
    handleDrawerStatus(status) {
      this.drawer.themeDrawer.visible = status;
    },
    handleDrawerClose(done) {
      done();
    },
    // 全屏
    handleScreen() {
        fullscreenToggel();
    },
    handleLanguage(language) {
      this.$i18n.locale = language;
      window.localStorage.setItem("locale", this.$i18n.locale);
      this.$store.dispatch("setMenuList", {parentMenus: [], allMenus: [], menuPageList: []});
      this.$store.dispatch("getMenuList", {params: {locale: this.$i18n.locale, module: "PC"}, Vue: this});
    }

    /*#endregion*/

    /*#region 获取数据*/

     /*#endregion*/

  },

  /*#region 生命周期函数(created、mount、等)*/
  created() {
    try {
      this.systemName = window.SYSTEM_NAME || this.systemName;
      this.themeSwitch = window.THEME_CONFIG.THEME_SWITCH || false;
    } catch (e) {
      console.warn(e);
    }
  },
  mounted() {
    this.userInfo = {account: sessionStorage.getItem("account") || localStorage.getItem("account") || "", userName: sessionStorage.getItem("userName") || localStorage.getItem("userName") || ""};
  },

  /*#endregion*/

  /*#region 注册绑定数据*/

  computed: {
    ...mapGetters(["isCollapse", "menuPageList"]),
    theme: {
      get() {
        return this.$store.getters.theme || "default"
      },
      set(value) {
        this.$store.dispatch("setTheme", value);
      }
    }
  },
  data() {
    return {
      UserPng,
      themes: [{value: "default", label: "默认主题"}],
      themeSwitch: window.THEME_CONFIG.THEME_SWITCH || false,
      languageSwitch: window.THEME_CONFIG.LANGUAGE_SWITCH || false,
      sysUserName: "",
      systemName: window.THEME_CONFIG.NAV_BAR_NAME || "",
      userInfo: {account: localStorage.getItem("account"), userName: localStorage.getItem("userName")},
      drawer: {
        themeDrawer: {visible: false, direction: "rtl"}
      }
    }
  }

  /*#endregion */

}
</script>
<style lang="scss" scoped>
  @import "../../../../assets/styles/scss/views/base/home/nav-bar.scss";
</style>
